<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
     <!-- The head of the site goes here -->

	<head>
	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>

	<!-- JSON library -->
		<script type="text/javascript" src="json2.js"></script>

	<!-- jQuery UI tabs -->
	<script type="text/javascript" src="todo_items/js/tabs.js"></script>
	<link rel="stylesheet" href="todo_items/css/tabs.css" type="text/css" media="screen" />


	<!-- Start of fancyBox -->
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
	<script type="text/javascript" src="fancybox/lib/jquery.mousewheel-3.0.6.pack.js"></script>
	<link rel="stylesheet" href="fancybox/source/jquery.fancybox.css?v=2.0.5" type="text/css" media="screen" />
	<script type="text/javascript" src="fancybox/source/jquery.fancybox.pack.js?v=2.0.5"></script>

	<!-- End of fancybox -->

		<!-- Sliding effect -->
	<script src="sliding_login_panel/js/slide.js" type="text/javascript"></script>

	<!-- stylesheets -->
  	<link rel="stylesheet" href="sliding_login_panel/css/slide.css" type="text/css" media="screen" />

  	  	<link rel="stylesheet" href="registration_validation/css/validation.css" type="text/css" media="screen" />

  	  	 	<script src="registration_validation/js/validation.js" type="text/javascript"></script>

	<link type="text/css" href="jQuery/css/custom-theme/jquery-ui-1.8.18.custom.css" rel="Stylesheet" />	
	<script type="text/javascript" src="jQuery/js/jquery-ui-1.8.18.custom.min.js"></script>
	<script type="text/javascript" src="functional.js"></script>
		<link rel="stylesheet" type="text/css" href="design.css" />

		<title>To-Do List</title>
		<meta name="author" content="Aleksandr Porowin and Aleksei Kulitskov">
		<meta name="date" content="2012-03-05">
		<meta name="keywords" content="to do list">
		<meta name="description" content="To-Do List">
		<meta http-equiv="content-type" content="text/html; charset=UTF-8">

		
	</head>

     <!-- Main part begins here -->

	<body>

		<!-- Panel -->
<div id="toppanel">
	<div id="panel">
		<div class="content clearfix">
			<div class="left">
				<h1>Welcome to our Web Page</h1>	
				<h2>For guests:</h2>	
				<p class="grey">If you are new to this website but would like to become a member, then just proceed with the registration on the right!</p>
				<h2>For members:</h2>
				<p class="grey">If you have already registered on our website, then just sign in!</p>
			</div>
			<div class="left">
				<!-- Login Form -->
				<form class="clearfix" action="#" method="post" id="login_form">
					<h1>Member Login</h1>
					<p id="login_error"></p>
					<label class="grey" for="log">Username:</label>
					<input class="field" type="text" name="login_name" id="login_name" value="Type your username here" size="23" />
					<label class="grey" for="login_pass">Password:</label>
					<input class="field passwordText" type="text" name="login_pass" id="passwordText" size="23" value ="Type your password here"/>
					<input class="field" type="password" name="login_pass" id="login_pass" size="23" />
        			<div class="clear"></div>
					<input type="submit" id="login_button" name="submit" value="Login" class="bt_login"/>
				</form>
			</div>
			<div class="left right">			
				<!-- Register Form -->
					<h1>Not a member yet? Sign Up!</h1>	
					<h2>Just press the button below:</h2>
					<p class="grey">We need to know more information about you, so, please, just follow the steps!</p>
					<br></br>
					<a id="hiddenRegistration" href="#register_form" style="display: none;"></a>
					<div style="display:none">
						<form name="register_form" id="register_form" method="post" action="test.html" onSubmit="formValidation(); return(false);">
								<table id="register_table">
    								<tr><td class="validation">Enter your name:<span id="starName"></span></td><td><input class="stylish" type="text" autocomplete="off" name="register_name" onkeyup="nameValidation();"><br><span id="errName"></span></td><td><img src="registration_validation/images/stoperr.png" id="imgName" alt="stoperr"></td></tr>
    								<tr><td class="validation">Enter your surname:<span id="starSurName"></span></td><td><input class="stylish" type="text" autocomplete="off" name="register_surname" onkeyup="surnameValidation();"><br><span id="errSurName"></span></td><td><img src="registration_validation/images/stoperr.png" id="imgSurName" alt="stoperr"></td></tr>
									<tr><td class="validation">Enter your email:<span id="starEmail"></span></td><td><input class="stylish" type="text" autocomplete="off" name="register_email" onkeyup="emailValidation();"><br><span id="errEmail"></span></td><td><img src="registration_validation/images/stoperr.png" id="imgEmail" alt="stoperr"></td></tr>
									<tr><td class="validation">Enter your password:<span id="starPass1"></span></td><td><input class="stylish" type="password" id="register_pass1"  autocomplete="off" name="register_pass1" onkeyup="password1Validation();"/><br><span id="errPass1"></span></td><td><img src="registration_validation/images/stoperr.png" id="imgPass1" alt="stoperr"></td></tr>
									<tr><td class="validation">Retype your password:<span id="starPass2"></span></td><td><input class="stylish" type="password" id="register_pass2" autocomplete="off"  name="register_pass2" onkeyup="password2Validation();"/><br><span id="errPass2"></span></td><td><img src="registration_validation/images/stoperr.png" id="imgPass2" alt="stoperr"></td></tr>
									
								</table>
								<input type="submit" id="signUpBtn" name="submit" value="Sign up!">
								<input type="reset" id="resetButton" style="display: none;">
						</form>
					</div>
					<input type="button" name="register_btn" id="register_btn" value="Register" class="bt_register" />
			</div>
		</div>
</div> 
<!-- /login -->	

	<!-- The tab on top -->	
	<div class="tab">
		<ul class="login">
			<li class="left">&nbsp;</li>
			<li></li>
			<li class="sep">|</li>
			<li id="toggle">
				<a id="open" class="open" href="#login">Log In | Register</a>
				<a id="close" style="display: none;" class="close" href="#">Close Panel</a>		
				<a id="logout_a" class="logout_a" href="test.html" style="display: none;">Log out</a>	
			</li>
			<li class="right">&nbsp;</li>
		</ul> 
	</div> <!-- / top -->
	
</div> <!--panel -->
		<div id="container">
			<div id="main">
			<div id="menuContainer">
				<ul id="tabMenu">
				  <li><a class="homeMenu" id="menu"></a><em>Home, sweet home!<div id="homeMenuButton"></div></em></li>
				  <li></li>
				  <li></li>
				  <li></li>
				</ul>
			</div>
			<div id="top"></div>
			<div id="middle">
				<div id="content">
					    <button id="addCategory">Add Category</button>
					<div id="tabs">
						<ul>
							<li><a href="#category-1">Nunc tincidunt</a><span class='ui-icon ui-icon-close'>Remove Tab</span></li>
						</ul>
						<div id="category-1">
							<div>
								<button id="addToDoThing">Add ToDO</button>
        						<div class="accordion">
        							<div>
				        				<h3><a href="#">Section 1</a></h3>
										<div>
											<p>
											Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
											ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
											amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
											odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
											</p>
										</div>
									</div>
									<div>
										<h3><a href="#">Section 2</a></h3>
										<div>
											<p>
											Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
											purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor
											velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In
											suscipit faucibus urna.
											</p>
										</div>
									</div>
       							</div>
    						</div>

						</div>

					</div>

			        <div id="addNewCategory" title="Add new category">
			            <p>Use the form below to add a category.</p>
			            <div><label for="categoryName">Category name:</label> <input type="text" id="categoryName"></div>
			        </div>

				</div>
				<div id="sidebar">test</div>	
				<div id="clear"></div>			
			</div>
			<div id="bottom"></div>
		</div>
		</div>
		<div id="footer"></div>
	</body>
</html>
